<template>
  <div class="starinfo">
    <!-- 物流单评价页 -->
    <!-- 书写标题头 -->
    <div class="order_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>快递单评价</span>
      <van-icon name="wap-home-o" />
    </div>
    <!-- 评价内容 -->
    <div class="pingjia">
      <!-- 总体评分 -->
      <div class="starAll">
        <p>总体评分</p>
        <h3>
          <span>{{ starVal.totalScore }}</span
          >分
        </h3>
        <ul>
          <li v-for="(item, index) in 5" :key="index">
            <img :src="index < starVal.totalScore ? imgTwo : imgOne" alt="" />
          </li>
        </ul>
      </div>
      <!-- 分开评分 -->
      <div class="pingfen">
        <h3>店铺评分</h3>
        <div class="Ping_list">
          <span>店铺评分</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col1(index)"
            >
              <img :src="index < starVal.shop ? srcImgTwo : srcImgOne" alt="" />
            </li>
          </ul>
        </div>
        <div class="Ping_list">
          <span>物流速度</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col2(index)"
            >
              <img
                :src="index < starVal.logistics ? srcImgThree : srcImgOne"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="Ping_list">
          <span>快递评分</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col3(index)"
            >
              <img
                :src="index < starVal.express ? srcImgFour : srcImgOne"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 上传文件 -->
    <div class="updes">
      <textarea name="" id="" v-model="desInfo"></textarea>
      <!-- 轮播图展示 -->
      <van-swipe :loop="false" :width="150" :height="150" :show-indicators="false">
        <van-swipe-item v-for="item in starVal.imgs" :key="item">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { StarXiangQing } from "@/request/api";
export default {
  props:["showIndicators"],
  data() {
    return {
      // 笑脸样式
      imgTwo: require("@/assets/xiaolian.png"),
      imgOne: require("@/assets/shangxin.png"),
      // 星星的样式
      srcImgOne: require("@/assets/pingfen-hui.png"),
      srcImgTwo: require("@/assets/pingfen-huang.png"),
      srcImgThree: require("@/assets/pingfen-cheng.png"),
      srcImgFour: require("@/assets/pingfen-hong.png"),
      //   文件上传
      fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      // 请求回来的数据
      starVal: "",
      // 描述的内容
      desInfo: "",
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
  },
  created() {
    StarXiangQing({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res.data);
      this.starVal = res.data;
      this.desInfo = this.starVal.info;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.starinfo {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  /* 头部样式 */
  .order_title {
    width: 100%;
    height: 0.5rem;
    background-color: #003399;
    color: white;
    padding: 0.2rem 0.2rem 0.1rem;
    box-sizing: border-box;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
  }
  /* 评价样式 */
  .pingjia {
    width: 100%;
    background-color: white;
    /* 总体评分样式 */
    .starAll {
      width: 100%;
      padding: 0 0.2rem 0.2rem 0.2rem;
      box-sizing: border-box;
      text-align: center;
      p {
        line-height: 0.4rem;
        color: #aaa;
      }
      h3 {
        color: #ffd147;
        span {
          font-size: 0.4rem;
        }
        padding-bottom: 0.1rem;
      }
      ul {
        display: flex;
        justify-content: space-around;
        border-bottom: 0.02rem solid #eee;
        padding-bottom: 0.15rem;
        li {
          height: 0.35rem;
          width: 0.35rem;
          img {
            width: 100%;
          }
        }
      }
    }
    /* 分类评分样式 */
    .pingfen {
      width: 100%;
      padding: 0 0.2rem;
      box-sizing: border-box;
      h3 {
        line-height: 0.3rem;
      }
      .Ping_list {
        display: flex;
        line-height: 0.2rem;
        line-height: 50px;
        /* justify-content: space-between; */
        padding: 0 0.2rem;
        ul {
          margin-left: 0.2rem;
          li {
            float: left;
            margin-right: 0.1rem;
            height: 0.5rem;
            vertical-align: center;
            img {
              height: 0.3rem;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .updes {
    margin-top: 0.1rem;
    background-color: white;
    width: 100%;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    textarea {
      width: 100%;
      height: 1rem;
      border: 0;
    }
    .van-swipe {
      .van-swipe-item {
        margin-right: 0.1rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>